<template>
  <div class="stateSetItemViewContainer" @click="clickView">
    <div class="title">{{ this.title }}</div>
    <div class="right">
      <div class="state">{{ this.stateValue }}</div>
      <img class="arrow" :src="getRightArrowImg" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    titlePro: {
      type: String,
      default: "",
    },
    stateValuePro: {
      type: String,
      default: "",
    },
    darkModePro: {
      type: String,
      default: "light",
    },
  },
  data() {
    return {
      title: "",
      stateValue: "",
      darkMode: "light",
    };
  },
  mounted() {
    this.title = this.titlePro;
    this.stateValue = this.stateValuePro;
    this.darkMode = this.darkModePro;
  },
  watch: {
    titlePro(newVal) {
      this.title = newVal;
    },
    stateValuePro(newVal) {
      this.stateValue = newVal;
    },
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
  },
  computed: {
    getRightArrowImg() {
      if (this.darkMode === "light") {
        return require("../../../assets/img/light/ic_right_arrow.png");
      } else {
        return require("../../../assets/img/dark/ic_right_arrow_dark.png");
      }
    },
  },
  methods: {
    clickView() {
      this.$emit("click");
    },
  },
};
</script>
<style scoped>
.stateSetItemViewContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 48px;
  width: 100%;
  align-items: center;
  /* background: rgba(0, 255, 0, 0.5); */
}

.stateSetItemViewContainer .title {
  font-size: 16px;
  color: var(--current-primary-color);
}

.stateSetItemViewContainer .right {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.stateSetItemViewContainer .right .arrow {
  width: 12px;
  height: 24px;
  /* background: rgba(255, 255, 0, 0.6); */
}

.stateSetItemViewContainer .right .state {
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--current-second-title-color);
  margin-right: 4px;
}
</style>
